<template>
    <div class="equipment-alarm">
        <el-form 
            class="form-container" 
            label-width="80px" 
            :size="size" 
            :model="form"
            label-position="left" 
            ref="form">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="测站编码:" prop="code">
                        <el-input 
                            style="width: 90%"
                            v-model="form.code"
                            placeholder="请输入"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="测站名称:" prop="name">
                        <el-input 
                            style="width: 90%"
                            v-model="form.name"
                            placeholder="请输入"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="行政区:" prop="city" label-width="60px" >
                        <el-select v-model="form.city" placeholder="请选择" style="width: 90%">
                            <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button :size="size" type="primary" @click="onSearch">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table
            :data="tableData"
            id="table"
            :height="tableHeight"
            style="width: 100%;"
            size="small"
            border>
            <el-table-column
                v-for="item in tableHeaderColumn"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next, total"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'equipment-alarm',
    props: {
        tableHeight: {
            type: Number,
            default: 300
        }
    },

    created() {
        
    },

    data() {
        return {
            size: 'mini',
            form: {
                code: '',
                name: '',
                city: ''
            },
            cityList: [],
            tableHeaderColumn: [
                { label: '序号', prop: 'sn', width: 50 },
                { label: '时间', prop: 'time'},
                { label: '电压', prop: 'monitorName' },
                { label: '电压报警', prop: 'name'},
                { label: '电源状态', prop: 'errorType'},
                { label: '终端箱门报警', prop: 'voltage' },
                { label: 'IC卡报警', prop: 'voltageAlarm' }
            ],
            tableData: [
                {sn: 1},
                {sn: 2},
                {sn: 3},
                {sn: 4 },
                {sn: 5},
                {sn: 6},
                {sn: 7},
                {sn: 8},
                {sn: 9},
                {sn: 10},
                {sn: 11},
                {sn: 12},
            ],
            
        };
    },

    methods: {
        onSearch() {
            
        }
    }
};
</script>

<style lang="scss" scoped>
// #6edef1
    .equipment-alarm {
        padding: 15px;
        :deep{
            .el-input__inner {
                background-color: rgba(110, 224, 241, 0);
                border: 1px solid rgba(110, 224, 241, 1);
                border-radius: 15px;
                padding-right: 10px;
                font-size: 14px;
            }

            .el-range-input {
                background: rgba(110, 224, 241, 0);
            }

            .el-table__body {
                .el-table__cell {
                    padding: 3px 0 !important;
                    background-color: rgba(255,255,255,0.6);
                    border-right: 1px solid #fff;
                    border-bottom: 1px solid #fff;
                    &:first-child {
                        background: rgba($color: #98E4F3, $alpha: 0.4);
                    }
                }
            }

            .el-table--border::after, .el-table--group::after, .el-table::before {
                background-color: rgba(110, 224, 241, 0.4);
            }

            .el-table thead tr th {
                background: rgba($color: #98E4F3, $alpha: 0.4) !important;
                color: #333;
                font-size: 14px;
                padding: 3px 0 !important;
            }

            .el-table--border, .el-table--group {
                border: 1px solid #fff;
            }
            
            .el-table--border th.el-table__cell.gutter:last-of-type {
                border: none;
            }

            .el-button--mini {
                padding: 6px 10px;
            }

            .el-form-item__label {
                color: #333;
            }

        }
        .el-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            :deep {
                button {
                    background: rgba(0, 0, 0, 0);
                }
                .btn-prev, .btn-next {
                    background: rgba(0, 0, 0, 0);
                    color: #02A7F0;
                }
                .el-pager li {
                    background: rgba(0, 0, 0, 0);
                    color: #333;
                    font-size: 12px;
                }
                .el-pager li.active {
                    color: #1890ff;
                }
                .el-pager li:hover {
                    color: #1890ff;
                }

                button:disabled {
                    color: #c0c4cc;
                }
                
            }
        }
    }

    
    
</style>